<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom结构获取</title>
</head>
<body>
<div class="container">
    <div class="box1">
        box1
    </div>
    <div class="box2">
        box2
    </div>
</div>
</body>
<script>
    function displayChildren() {
        var container = document.getElementsByClassName('container')[0];
        var box3 = document.createElement('div');
        box3.innerText = "box3";
        container.appendChild(box3);

        console.log(container);
        console.log(container.children);

        for(var i=0;i<container.children.length;i++){

            alert(container.children[i].innerHTML)
        }
    }

    function displayParent() {
        var box2 = document.getElementsByClassName('box2')[0];
       console.log(box2.parentElement) ;
       alert(box2.parentElement.innerHTML);
    }

    function displaySibling() {
        var box1 = document.getElementsByClassName('box1')[0];
        console.log(box1.nextElementSibling) ;
        alert(box1.nextElementSibling.innerHTML);
    }

    displaySibling();
</script>

</html>